document.querySelector('#username').innerHTML = localStorage.getItem('user-name')

document.querySelector('#logout').addEventListener('click', function () {
  localStorage.removeItem('user-name')
  localStorage.removeItem('user-token')

  location.href = './login.html'
})






axios.get('/dashboard').then(result => {
  let data = result.data.data
  console.log(data.overview)
  for (let key in data.overview) {
    document.querySelector(`[name=${key}]`).innerHTML = data.overview[key]  
    lineChart(data.year)
    pieChart(data.salaryData)
    sexSalaryChart(data.salaryData)
    groupSalaryChart(data.groupData)
    mapChart(data.provinceData) 
  }
    
})
// 




// 折线图  全学科薪资走势
let lineChart = (data) => {
  // let data = result.data.data
    // 初始化echarts
    let myChart = echarts.init(document.querySelector('#line'))
    // 配置项
    let option ={
        title: {
            text: '2022全学科薪资走势',
            left: 10,
            top: 15,
            textStyle: {
                fontSize: 16
            }
        },
        xAxis: {
            axisLabel:{
                color: '#999'
            },
            axisLine: {
                lineStyle:{
                    color: '#ccc',
                    type: 'dashed'
                }
            },
            type: 'category',
            data: data.map(item => item.month)
            // data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
        },
        yAxis: {
            type: 'value',
            splitLine: {
                lineStyle: {
                  type: 'dotted'
                }
              }
        },
        series: [
            {
                // data: [9000, 12000, 15000, 13000, 10000, 18000, 14000, 10000, 12000, 13000, 15000, 19000],
                data: data.map(item => item.salary),
                type: 'line',
                smooth: true,
                lineStyle: {
                    width: 6,
                },
                symbolSize: 10, // 线条上拐点位置的空心圆大小
                areaStyle: {
                  // 线条区域样式设置
                  color: {
                    type: 'linear', // 表示线性渐变
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [
                      {
                        offset: 0,
                        color: '#499FEE' // 0% 处的颜色
                      },
                      {
                        offset: 0.8,
                        color: 'rgba(255,255,255,0.2)' // 0% 处的颜色
                      },
                      {
                        offset: 1,
                        color: 'rgba(255,255,255,0)' // 100% 处的颜色
                      }
                    ],
                    global: false // 缺省为 false
                  }
                }
            }   
        ],
        
        grid: {
            top: '20%'
        },
        color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: '#499FEE' // 0% 处的颜色
              },
              {
                offset: 1,
                color: '#5D75F0' // 100% 处的颜色
              }
            ],
            global: false // 缺省为 false
        },
        tooltip: {},
      };
    // 创建图表
    myChart.setOption(option)

}
// lineChart()

// 饼图  班级薪资分布
let pieChart = (data) => {
    // 初始化echarts
    let myChart = echarts.init(document.querySelector('#salary'))
    // 配置项
    let option = {
        title: {
            text: '班级薪资分布',
            left: 10,
            top: 15,
            textStyle: {
                fontSize: 16
            }
        },
        color: ['#FDA224', '#5097FF', '#3ABCFA', '#34D39A'],
        // 鼠标移入提示
        tooltip: {
          trigger: 'item'
        },
        legend: {
          bottom: '6%',
          left: 'center'
        },
        series: [
          {
            name: '班级薪资分布',
            type: 'pie',
            radius: ['50%', '64%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2
            },
            // 文字标签
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '40',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            // data: [
            //     { value: 1048, name: '1万以下' },
            //     { value: 235, name: '1万-2万' },
            //     { value: 580, name: '1.5万-2万' },
            //     { value: 484, name: '2万以上' }
            // ]
            data: data.map(item => {
              return{value: item.g_count + item.b_count,
              name: item.label}
            })
          }
        ]
      };
    // 创建图表
    myChart.setOption(option)
}
// pieChart()

// 饼图 - 男女生平均薪资
let sexSalaryChart = (data) => {
    let myChart = echarts.init(document.querySelector('#gender'))
    let option = {
        // 标题配置
        title: [
          {
            text: '男女薪资分布',
            left: 10, // 10 表示10px
            top: 10,
            textStyle: {
              fontSize: 16
            }
          },
          {
            text: '男生',
            left: '45%', // 10 表示10px
            top: '45%',
            textStyle: {
              fontSize: 12
            }
          },
          {
            text: '女生',
            left: '45%', // 10 表示10px
            top: '85%',
            textStyle: {
              fontSize: 12
            }
          }
        ],
        // 鼠标移入的提示
        tooltip: {
          trigger: 'item'
        },
        // 颜色的设置
        color: ['#FDA224', '#5097FF', '#3ABCFA', '#34D39A'],
        // 系列数据
        series: [
          {
            name: '男生薪资分布', // 这个名字会显示在 提示框中
            type: 'pie', // 表示饼图
            center: ['50%', '30%'], // 圆心点坐标
            radius: ['20%', '30%'], // 内外圈的半径
            // data: [
            //   { value: 1048, name: '1万以下' },
            //   { value: 235, name: '1万-2万' },
            //   { value: 580, name: '1.5万-2万' },
            //   { value: 484, name: '2万以上' }
            // ]
            data: data.map(item => ({ name: item.label, value: item.b_count }))
          },
          {
            name: '男生薪资分布', // 这个名字会显示在 提示框中
            type: 'pie', // 表示饼图
            center: ['50%', '70%'], // 圆心点坐标
            radius: ['20%', '30%'], // 内外圈的半径
            // 
            data: data.map(item => ({ name: item.label, value: item.g_count }))
          }
        ]
      }
    myChart.setOption(option)
  }
  // sexSalaryChart()
// 柱状图 - 每组薪资

  let groupSalaryChart = (data) => {
    let myChart = echarts.init(document.querySelector('#lines'))
    let option = {
      grid: {
        left: 70,
        top: 30,
        right: 30,
        bottom: 50
      },
      xAxis: {
        type: 'category',
        // data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
        data: data[1].map(item => item.name),
        axisLine: {
          lineStyle: {
            color: '#ccc',
            type: 'dashed'
          }
        },
        axisLabel: {
          color: '#999'
        }
      },
      yAxis: {
        type: 'value',
        splitLine: {
          lineStyle: {
            type: 'dashed'
          }
        }
      },
      tooltip: {
        trigger: 'item'
      },
      color: [
        {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: '#34D39A' // 0% 处的颜色
            },
            {
              offset: 1,
              color: 'rgba(52,211,154,0.2)' // 100% 处的颜色
            }
          ]
        },
        {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: '#499FEE' // 0% 处的颜色
            },
            {
              offset: 1,
              color: 'rgba(73,159,238,0.2)' // 100% 处的颜色
            }
          ]
        }
      ],
      series: [
        {
          // data: [12200, 17932, 13901, 13934, 21290, 23300, 13300, 13320],
          data: data[1].map(item => item.hope_salary),
          type: 'bar'
        },
        {
          // data: [22820, 19932, 16901, 15934, 31290, 13300, 14300, 18320],
          data: data[1].map(item => item.salary),
          type: 'bar'
        }
      ]
    };
    myChart.setOption(option)


    // 找到包含按钮的大盒子
let btns = document.querySelector('#btns')

// 给大盒子注册单击事件
btns.addEventListener('click', function(e) {
  // 判断，如果点击的是按钮
  if (e.target.tagName === 'BUTTON') {
    // 排它思想
    btns.querySelector('.btn-blue').classList.remove('btn-blue')
    e.target.classList.add('btn-blue')
    // 获取组号
    let group = e.target.innerText
    // 修改series中的数据
    option.xAxis.data = data[group].map(item => item.name)
    option.series[0].data = data[group].map(item => item.hope_salary)
    option.series[1].data = data[group].map(item => item.salary)
    // 重新创建图表
    myChart.setOption(option)
  }
})
  }
  // groupSalaryChart()

  // 地图 - 籍贯分布
  let mapChart = (data) => {
    let mapData = [
      { name: '南海诸岛', value: 0 },
      { name: '北京', value: 0 },
      { name: '天津', value: 0 },
      { name: '上海', value: 0 },
      { name: '重庆', value: 0 },
      { name: '河北', value: 0 },
      { name: '河南', value: 0 },
      { name: '云南', value: 0 },
      { name: '辽宁', value: 0 },
      { name: '黑龙江', value: 0 },
      { name: '湖南', value: 0 },
      { name: '安徽', value: 0 },
      { name: '山东', value: 0 },
      { name: '新疆', value: 0 },
      { name: '江苏', value: 0 },
      { name: '浙江', value: 0 },
      { name: '江西', value: 0 },
      { name: '湖北', value: 0 },
      { name: '广西', value: 0 },
      { name: '甘肃', value: 0 },
      { name: '山西', value: 0 },
      { name: '内蒙古', value: 0 },
      { name: '陕西', value: 0 },
      { name: '吉林', value: 0 },
      { name: '福建', value: 0 },
      { name: '贵州', value: 0 },
      { name: '广东', value: 0 },
      { name: '青海', value: 0 },
      { name: '西藏', value: 0 },
      { name: '四川', value: 0 },
      { name: '宁夏', value: 0 },
      { name: '海南', value: 0 },
      { name: '台湾', value: 0 },
      { name: '香港', value: 0 },
      { name: '澳门', value: 0 }
    ]
    // 使用服务器响应数据，替换默认数据
    mapData.forEach(item => {
      let obj = data.find(
        it =>
          it.name.replace(/省|回族自治区|吾尔自治区|壮族自治区|特别行政区|自治区/g, '') === item.name
          )
          if (obj) item.value = obj.value
      })
    let myChart = echarts.init(document.querySelector('#map'))
    let option = {
      title: {
        text: '籍贯分布',
        left: 10,
        top: 10,
        textStyle: {
            fontSize: 16
        }
      },
      series: [
        {
          type: 'map',// 表示地图
          map: 'china',// 表示中国地图
          data: mapData,
          // data: [
          //   { name: '南海诸岛', value: 0 },
          //   { name: '北京', value: 3 },
          //   { name: '天津', value: 2 },
          //   { name: '上海', value: 4 },
          //   { name: '重庆', value: 1 },
          //   { name: '河北', value: 20 },
          //   { name: '河南', value: 23 },
          //   { name: '云南', value: 0 },
          //   { name: '辽宁', value: 15 },
          //   { name: '黑龙江', value: 12 },
          //   { name: '湖南', value: 2 },
          //   { name: '安徽', value: 5 },
          //   { name: '山东', value: 18 },
          //   { name: '新疆', value: 0 },
          //   { name: '江苏', value: 5 },
          //   { name: '浙江', value: 1 },
          //   { name: '江西', value: 4 },
          //   { name: '湖北', value: 3 },
          //   { name: '广西', value: 2 },
          //   { name: '甘肃', value: 9 },
          //   { name: '山西', value: 11 },
          //   { name: '内蒙古', value: 14 },
          //   { name: '陕西', value: 14 },
          //   { name: '吉林', value: 10 },
          //   { name: '福建', value: 0 },
          //   { name: '贵州', value: 0 },
          //   { name: '广东', value: 0 },
          //   { name: '青海', value: 3 },
          //   { name: '西藏', value: 0 },
          //   { name: '四川', value: 1 },
          //   { name: '宁夏', value: 1 },
          //   { name: '海南', value: 0 },
          //   { name: '台湾', value: 0 },
          //   { name: '香港', value: 0 },
          //   { name: '澳门', value: 0 }
          // ],
          label: {
            show: true,   // 现实省的名字
            fontSize: 10,  // 文字大小
            color: 'rgba(0,0,0,0.7)' // 字体颜色
          },
          itemStyle: {
            areaColor: '#E0FFFF',  // 区域颜色
            borderColor: 'rgba(0, 0, 0, 0.2)' // 区域边界线（省界线）颜色
          },
          emphasis: {
            itemStyle: {
              areaColor: '#34D39A', // 区域颜色
              borderWidth: 0,  // 区域边框（省界线）大小
              shadowBlur: 20,  // 阴影模糊大小
              shadowColor: 'rgba(0, 0, 0, 0.5)'  // 阴影颜色
            }
          }
        }
      ],
      // 鼠标移入提示
      tooltip: {
        // 自定义提示内容
        formatter: '{b}: {c} 位学员',
        borderColor: 'transparent',
        backgroundColor: 'rgba(0,0,0,0.5)',
        textStyle: {
          color: '#fff'
        }
      },
      visualMap: {
        // type: 'piecewise'
        min: 0,
        max: 20,
        left: 40,
        bottom: 20,
        text: [20, 0],
        inRange: {
          color: ['#fff', '#0075F0']
        },
        show: true
      },
        
    }
    myChart.setOption(option)
  }
  // mapChart()
